<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.myBorder {
			width: 60%;
			min-height: 100px;
			margin: 5px auto;
			padding: 5px;
			border: 1px solid red;
		}
	</style>
	<script src="vue.js"></script>
</head>

<body>
	<div id="app">
		<div class="myBorder" @click="fn2">
			事件修饰符<br />
			.stop阻止事件冒泡(先执行自身再向上执行)<br />
			<button type="button" @click="fn1">fn1</button>
			<br />
			<button type="button" @click.stop="fn1">stop阻止事件冒泡fn1</button>
		</div>
		<div class="myBorder" @click="fn2">
			事件修饰符<br />
			.prevent阻止默认事件<br />
			<a href="https://www.baidu.com" @click="fn1">百度</a>
			<br />
			<a href="https://www.baidu.com" @click.prevent="fn1">prevent百度</a>
			<br />
			<a href="https://www.baidu.com" @click.prevent.stop="fn1">prevent和stop百度</a>
		</div>
		<div class="myBorder" @click.capture="fn3">
			<div class="myBorder">
				事件修饰符<br />
				.capture 事件捕获(从执行外再执行自身)<br />
				<button type="button" @click="fn1">fn1</button>
			</div>
		</div>
		<div class="myBorder" @click.self="fn3">
			<div class="myBorder" @click.self="fn2">
				事件修饰符<br />
				.self 自身被触发了,才被执行<br />
				<button type="button" @click="fn1">fn1</button>
			</div>
		</div>
		<div class="myBorder">
			事件修饰符<br />
			.once 只能被执行一次<br />
			<button type="button" @click.once="fn1">fn1</button>
		</div>
	</div>
	<script>
		var app = new Vue({
			el: "#app",
			data: {},
			methods: {
				fn1() {
					console.log("fn1")
				},
				fn2() {
					console.log("fn2")
				},
				fn3() {
					console.log("fn3")
				}
			},
			computed: {

			}
		});
	</script>
</body>

</html>